<template>
  <div class="app">
    <!-- 顶部导航栏 -->
    <div class="main_head">
      <div class="head_title">
        <span>CSDN后台管理</span>
      </div>
      <div class="head_user">
        <span>欢迎:{{ d.idCard }}</span>
        <span @click="loginout"><router-link :to="{ name: 'AdminL' }">退出登录</router-link></span>
      </div>
    </div>
    <!-- /顶部导航栏 -->

    <!-- 中部内容栏 -->
    <div class="main_body">
      <div class="body_left">
        <el-menu
          style="height: 100%;"
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-active="this.$route.path" router
        >
          <el-menu-item index="/Role" >
            <i class="el-icon-user"></i>
            <span slot="title">角色管理</span>
          </el-menu-item>
          <el-menu-item index="/User">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/New">
            <i class="el-icon-s-comment"></i>
            <span slot="title">博客管理</span>
          </el-menu-item>
          <el-menu-item index="/Company">
            <i class="el-icon-office-building"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="body_right">
          <router-view></router-view>
      </div>

    </div>
    <!-- /中部内容栏 -->

    <!-- 页脚 -->
    <Footer></Footer>
    <!-- /页脚 -->
  </div>
</template>

<script>
  import Footer from '../../components/Footer';
export default {
  components: {
    Footer
  },
  data() {
    return {
      d: {}
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    /*单个id查询用户*/
    findUserById(id) {
      this.updateFormVisible = true;
      let _this = this;
      console.log(id);
      this.$axios
        .get('http://localhost:8087/user/getUserById/' + id)
        .then(function(res) {
          _this.d = res.data;
        })
        .catch(function(err) {
          alert('查询失败');
        });
    },
    // 退出登录
    loginout(){
      removeItem('id')
    }
  },
  created() {
    this.findUserById(localStorage.getItem("id"));
  }
};
</script>

<style scoped>
.main_head{
  width: 100%;
  padding-top: 20px;
  height: 46px;
  background-color: #545c64;
}
.head_title{
  float: left;
}
.head_user{
  float: right;
  margin-right: 40px;
}
.head_user ,span ,router-link{
  color: #FFFFFF;
  font-size: 15px;
  margin-left: 20px;
  text-decoration: none;
}
.head_title span{
  color: #FFFFFF;
  font-size: 20px;
  margin-left: 25px;
}
.main_body{
  width: 100%;
  min-height: 815px;
  display: flex;
}
.body_left{
  width: 232px;
  min-height: 815px;

}
.body_right{
  min-height: 815px;
}
</style>
